<template>
  <div class="login_container">
    <div class="login-box">
      <!--头像区域-->
      <div class="head-box">
        <img src="../assets/logo.png">
      </div>
      <el-form class="login-form"
               :model="loginForm"
               :rules="loginFormRules"
               ref="loginFormRef"
               status-icon
               label-width="120px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户：" prop="userName">
          <el-input v-model="loginForm.account"
                    type="input"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="loginForm.password"
                    type="password"></el-input>
        </el-form-item>
        <div class="but-box">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>


<script>
import {userLogin} from '@/components/request/api'
import {segmentedEncryption} from '@/utils/jesencrypt'

export default {
  // name: 'Login',
  // props: {
  //
  // },
  data() {
    return {
      loginForm: {
        account: "张三",
        password: "123456"
      },
      /*自定义校验规则*/
      loginFormRules: {
        password: [
          {required: true, message: '请输密码', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '请输入用户名称', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        // userName: [
        // { required: true, message: '请输入用户名称', trigger: 'blur' },
        // { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        // ],

      },

    }
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        console.log(valid)
        if (!valid) return
        let par = {
          "account": segmentedEncryption(this.loginForm.account),
          "password": segmentedEncryption(this.loginForm.password),
        }
        userLogin(par)
            .then(res => {
              console.log(res.data.data['menu_config_list'])
              if (res.data.code == 200) {
                //1、登录成功获取token 存储到session
                //  1-1 登录之外或特殊接口外，必须要token才能访问
                //  1-2 token只能在网站打开期间生效，所以token存储在sessionStorage中
                console.log('token', res.data.data.token)
                window.sessionStorage.setItem("token", res.data.data.token)
                window.sessionStorage.setItem("userInfo", JSON.stringify(res.data.data))
                window.localStorage.setItem("menuInfo", JSON.stringify(res.data.data['menu_config_list']))
                //2、跳转到主页 /home
                this.$message.success("登录成功")
                this.$router.push( "/home");
                //
                // this.$router.push({ name: "/home", params: { menuInfo: "1", b: "2" } });
              } else {
                //失败
                this.$message.error(res.data.message)
              }
            }).catch(err => {
          console.log(err)
          // this.$message.error()
        })
        // const { data: res } = await this.$http.post('user/login', this.loginForm)
        // console.log(res)
        // if (res.meta.status !== 200) return this.$message.error('登录失败！')
        // this.$message.success('登录成功！')
        // window.sessionStorage.setItem('token', res.data.token)
        // this.$router.push('/home')
      })
    },
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
  }
}
</script>

<style lang="less" scoped>
/*scoped 样式正在当前页面生效*/
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login-box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  /*绝对定位
   //1.absolute：绝对定位；
    //  脱离原来的位置进行定位，
    //  相对于最近的有定位属性的父级元素进行定位，如果没有就相对于文档进行定位
  */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .head-box {
    border-radius: 50%;
    width: 130px;
    height: 130px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }

    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    //position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    /*box-sizing 定义如何计算一个元素的总宽度和总高度
    要加上内边距(padding)和边框*/
    box-sizing: border-box;
    //border: 1px solid red;
  }

  .but-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    //border: 1px solid red;

  }
}
</style>



